App不可能只有一個頁面，要實現頁面之間的切換就需要Navigator套件來幫助頁面之間的參數傳遞以及從哪頁來的導覽歷史。React Native有三種現成的導覽方式，分別為：

• Stack Navigator
• Tab Navigator
• Drawer Navigator
  我的專案主要會用到Stack Navigator與Tab Navigator，今天先來講Stack Navigator的部分。Stack Navigator類似於堆疊的概念，新的頁面會蓋在舊的頁面之上，要退出先的頁面後才能看到下方的舊頁面。

安裝套件

呼叫出vscode控制台後輸入以下程式來安裝React Navigation與元件庫：

npm install --save @react-navigation/native @react-navigation/ stack react-native-gesture-handler react-native-reanimated react-
native-screens react-native-safe-area-context @react-native- community/masked-view`
`npm install react-native-elements --save

開始使用

React Navigation提供以下功能

• Stack元件：儲存參與Stack導覽的頁面
  導覽以頁面為單位，每一頁面都是一個JS檔，以任務列表-地點篇與其詳細誒例，設定Stack的方法：

  import LocationScreen from './LocationScreen';
  import DetailScreen from './DetailScreen';
  

  <NavigationContainer>
      <Stack.Navigator>
          <Stack.Screen 
                name="Home" 
                component={LocationScreen} 
                options={{
                  title: " ",
                  headerStyle:{
                    height:80,
                    backgroundColor: "#A7050E",
                    shadowColor: "#000",
                    shadowOffset: { width: 0, height: 3 },
                    shadowOpacity: 0.1,
                  },
                 headerLeft:()=><Text style={{fontWeight:'400',fontSize:20, color:"#fff", marginLeft:16}}>{locationData.locationTitle}</Text>
                }}
              />
          <Stack.Screen 
                name="Detail" 
                component={DetailScreen}
                options={({ route }) => ({ 
                  title: route.params.title,
                  headerStyle: {
                    height:80,
                    backgroundColor: "#A7050E",
                    shadowColor: "#000",
                    shadowOffset: { width: 0, height: 3 },
                    shadowOpacity: 0.1,
                  },
                  headerTintColor: '#fff',
                  headerTitleStyle: {
                    fontWeight: '400',
                    fontSize: 20,
                  },  
                 })}
              />      
        </Stack.Navigator>
  </NavigationContainer>
  

  name為此Stack的名稱，component則是對應的js檔，而options則可以設定頁面header的格式。

• navigation.navigate()導覽函數：執行頁面切換的函數

   <TouchableOpacity onPress={() => {navigation.navigate('Detail',location); }} activeOpacity={0.6}>
   </TouchableOpacity>
  

  navigation.navigate()第一個引數放入要跳轉頁面的name，第二個引數則是放入要傳遞的資料（程式中的 location是個JSON矩陣）。

• route.params參數變數：接收其它頁面傳遞的參數
  接收到的參數可用route.params展開，如上面的程式中，Detail的Stack裡options的title設定為route.params.title，這裡是由route來接收函數，然後經由route.params.title 取出title來顯示。